<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>size</title>
    <style type="text/css">
*{
    padding: 0;
    margin:0;
}
body{
    border: 10px solid black;
    padding: 20px;
    margin: 40px;
}
#parent{
    width: 1000px;
    height: 100px;
    background-color: #99CCFF;
    position: relative;
}
#child{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: yellow;
    top:20px;
    left:12px;
}
#div{
    width: 100px;
    height: 100px;
    border:10px solid black;
    background-color: yellow;
    padding: 20px;
    margin: 40px;
}
#div1{
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
    margin:10px;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
    margin:10px;
    border:1px solid red;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
    margin:10px;
    border:1px solid red;
}
#div4{
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
    margin:10px;
    border:1px solid red;
}
#div5{
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
    margin:10px;
    border:1px solid red;
    filter:alpha(opacity:30);
    opacity: 0.3;
}
    </style>
</head>
<body>

<div id="parent">
    <div id="child"></div>
</div>
<div id="div"></div>

<h2>offsetWidth</h2>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3" style="width:100px;"></div>
<div id="div4"></div>
opacity:<textarea type="text" id="txt5"></textarea>
<div id="div5"></div>



<script>

var oDiv = document.getElementById("div");
var oChild = document.getElementById("child");

console.log("width", oDiv.style.width);
console.log("height", oDiv.style.height);

console.log("width", getStyle(oDiv, "width"));
console.log("height", getStyle(oDiv, "height"));

// width + padding
console.log("clientWidth", oDiv.clientWidth);
console.log("clientHeight", oDiv.clientHeight);

// width + padding
console.log("scrollWidth", oDiv.scrollWidth);
console.log("scrollHeight", oDiv.scrollHeight);

// width + padding + border
console.log("offsetWidth", oDiv.offsetWidth);
console.log("offsetHeight", oDiv.offsetWidth);

// IE FF ：document.documentElement
// Chrom : document.body
//网页可视区的宽度（不包含滚动条的宽度）
console.log(document.body.clientWidth, document.body.clientHeight);

//网页可视区的宽度（不包含滚动条的宽度, 包括border）
console.log(document.body.offsetWidth, document.body.offsetHeight);
  
//网页正文全文宽
console.log(document.body.scrollWidth, document.body.scrollHeight);  
 
// 1025 880 
// 1025 880
// 1025 890 

// padding:20px;
// 1025 930 
// 1025 930 
// 1025 930 

// padding:20px;
// border:10px;
// 1005 930
// 1025 950
// 1030 950 

// padding:20px;
// border:10px;
// margin:40px;
// 925 930
// 945 950
// 1070 1030 

console.log(document.body.scrollTop, document.body.scrollLeft);   //网页被卷去的高/左

// offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
// offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
console.log(oChild.offsetTop, oChild.offsetLeft);

console.log(window.screenTop, window.screenLeft);  //前窗口距离屏幕顶端/左侧的距离  
console.log(window.screen.width, window.screen.height);  //屏幕分辨率的高/宽(包括任务栏)
console.log(window.screen.availWidth, window.screen.availHeight);  //屏幕可用工作区高/宽(不包括任务栏)






var oDiv5 = document.getElementById("div5");
document.getElementById("txt5").value = getStyle(oDiv5, 'opacity') + " " 
+ parseFloat(getStyle(oDiv5, 'opacity')) + " "
+ Math.round(parseFloat(getStyle(oDiv5, 'opacity')));
// alert(parseFloat(getStyle(oDiv5, 'opacity'))); // IE Chrom 返回的都是浮点数


setInterval(function(){
    var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");
    var oDiv3 = document.getElementById("div3");
    var oDiv4 = document.getElementById("div4");

    // 为什么div1是变窄了，而div2变宽？
    // 比如一个div  width:200px    border:1px    padding:1px  -->  offsetWidth:  222px    (width+border+padding)
    // div2   width:200px  border:1px  -->  offsetWidth:202px;
    // 每次运动的时候，div2的width其实都是加1，原来都是border的width在搞怪啊
    oDiv1.style.width = oDiv1.offsetWidth - 1 + 'px';
    oDiv2.style.width = oDiv2.offsetWidth - 2 + 'px';

    // 解决办法1 -- width写在行间，不用offsetWidth
    oDiv3.style.width = parseInt(oDiv3.style.width) - 1 + 'px';
    // 解决办法2
    oDiv4.style.width = parseInt(getStyle(oDiv4, "width")) - 1 + 'px'; 

}, 30);



// 获取非行间样式
function getStyle(obj, name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }
    else{
        return getComputedStyle(obj, null)[name];
    }
}


</script>
</body>
</html>